﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="User_Face_Login.aspx.cs" Inherits="User_Face_Login" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset='UTF-8' />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"/>
    <title>刷脸登录</title>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="./css/font.css"/>
    <link rel="stylesheet" href="./css/xadmin.css"/>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <script type="text/javascript" src="./js/cookie.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div>
                <%--<div></div>--%>
                <div style="margin-top: 80px; margin-left: 20%; width: 30%; padding: 10px" class="layui-bg-green">刷脸登录</div>
                <div style="margin-left: 20%; margin-top: 20px">
                    <video id="video" autoplay="" style="width: 70%;"></video>
                </div>
                <div style="margin-top: 10px; margin-left: 20%; width: 70%">
                    <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
                </div>
                    
                <div style="margin-top: 10px; margin-left: 20%; width: 30%">
                    <asp:Button ID="capture" runat="server" Text="登录" OnClick="capture_Click" class="layui-btn" />
                </div>
                <%--<div style="margin-left: 20%; width: 70%">
                    <span style="color: #f00; font-size: smaller">
                        <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
                    </span>
                </div>--%>

            </div>
           
        </div>
        <!-- 显示MediaStream视频流 -->
        <div>


            <asp:HiddenField ID="HiddenField1" runat="server" />
        </div>
        <div style="display: none">
            <canvas id="canvas" width="480" height="320"></canvas>
        </div>

        <script type="text/javascript">


            // 访问用户媒体设备的兼容方法
            function getUserMedia(constraints, success, error) {
                if (navigator.mediaDevices.getUserMedia) {
                    // 最新的标准API
                    navigator.mediaDevices.getUserMedia(constraints)
                        .then(success).catch(error);
                } else if (navigator.webkitGetUserMedia) {
                    // Webkit核心浏览器
                    navigator.webkitGetUserMedia(constraints, success, error);
                } else
                    if (navigator.mozGetUserMedia) {
                        // Firefox浏览器
                        navigator.mozGetUserMedia(constraints, success, error);
                    } else if (navigator.getUserMedia) {
                        // 旧版API
                        navigator.getUserMedia(constraints, success, error);
                    }
            }
            var video = document.getElementById("video");// video元素
            var canvas = document.getElementById("canvas");// canvas元素
            var context = canvas.getContext("2d");

            // 成功的回调函数
            function success(stream) {
                var CompatibleURL = window.URL || window.webkitURL
                video.src = CompatibleURL.createObjectURL(stream);//将视频流设置为video元素的源
                video.play();// 播放视频
            }

            // 异常的回调函数
            function error(error) {
                console.log('访问用户媒体设备失败：', error.name, error.message);
            }

            if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia ||
                navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
                // 调用用户媒体设备，访问摄像头
                getUserMedia({ video: { width: 480, height: 320 } }, success, error);
            } else {
                alert('您的浏览器不支持访问用户媒体设备！');
            }

            // 绑定拍照按钮的点击事件
            document.getElementById("capture").addEventListener("click", function () {
                context.drawImage(video, 0, 0, 480, 320);// 将video画面在canvas上绘制出来
                var data = canvas.toDataURL('image/png', 1);
                document.getElementById('HiddenField1').value = data;
            });
	        </script>

    </form>
</body>
</html>
